.col-lg-12 {
  padding: 0;
  overflow: hidden;
}
.col-md-12 {
  padding: 0;
  overflow: hidden;
}
.header {
  height: 620px;
  width: 100%;
}
.header .nav {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.header .nav .left {
  -webkit-animation: header_move 1.5s 0.1s both;
  animation: header_move 1.5s 0.1s both;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  float: left;
  position: relative;
}
.header .nav .right {
  height: 80px;
  float: right;
  -webkit-animation: header_move 1.5s 0.1s both;
  animation: header_move 1.5s 0.1s both;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
  line-height: 80px;
  position: relative;
}
h1 {
  margin: 0;
}
.header .nav .right ul {
  height: 80px;
  line-height: 80px;
}
.header .nav .right ul li {
  float: left;
  margin-left: 30px;
  position: relative;
}
.header .nav .right ul li a {
  color: #708090;
  font-size: 18px;
}
.header .nav .right ul li .a_4 {
  color: #1e90ff;
}
.header .nav .right ul li a:hover {
  color: #1e90ff;
}
.header .nav .right ul li #span_4 {
  display: inline-block;
  width: 100%;
  border-bottom: 2px solid #1e90ff;
  position: absolute;
  top: 62px;
  right: 0;
}
.header .backgrounds {
  width: 100%;
  height: 620px;
  position: absolute;
  top: 0;
  -webkit-animation: header_move 1.5s 0.6s both;
  animation: header_move 1.5s 0.6s both;
}
.header .backgrounds img {
  width: 100%;
  height: auto;
}
.navigation {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  -webkit-animation: bottom_move 1.5s 0.2s both;
  animation: bottom_move 1.5s 0.2s both;
  position: relative;
}
.navigation .top-title {
  position: relative;
  margin-bottom: 20px;
}
.navigation .top-title .nav-1,
.navigation .top-title .nav-2,
.navigation .top-title .nav-3,
.navigation .top-title .nav-4 {
  width: 225px;
  height: 100px;
  color: #05173b;
  text-align: center;
  border-radius: 30px;
  line-height: 100px;
  display: inline-block;
  -webkit-box-shadow: 30px 1px 40px 6px #e0e0e0;
  box-shadow: 30px 1px 40px 6px #e0e0e0;
  cursor: pointer;
}
.navigation .top-title .nav-1 {
  background-color: #1e90ff;
  color: #fff;
}
.navigation .top-title .nav-2 {
  margin-left: 100px;
}
.navigation .top-title .nav-3 {
  margin-left: 100px;
}
.navigation .top-title .nav-4 {
  margin-left: 87px;
}
.navigation .top-title .nav-1 h2,
.navigation .top-title .nav-2 h2,
.navigation .top-title .nav-3 h2,
.navigation .top-title .nav-4 h2 {
  font-size: 30px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}
.navigation .backgrounds {
  background: url("/css/image/quxian.png") no-repeat;
  width: 985px;
  height: 111px;
  position: relative;
  margin: 0 auto;
}
.navigation .backgrounds .dot-1,
.navigation .backgrounds .dot-2,
.navigation .backgrounds .dot-3,
.navigation .backgrounds .dot-4,
.navigation .backgrounds .dot-5,
.navigation .backgrounds .dot-6,
.navigation .backgrounds .dot-7 {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #708090;
  position: absolute;
}
.navigation .backgrounds .dot-1 {
  left: 0;
  top: -9px;
  background-color: #1e90ff;
}
.navigation .backgrounds .dot-2 {
  left: 320px;
  top: -9px;
}
.navigation .backgrounds .dot-3 {
  right: 310px;
  top: -9px;
}
.navigation .backgrounds .dot-4 {
  right: 0;
  top: -9px;
}
.navigation .backgrounds .dot-5 {
  left: 155px;
  bottom: -9px;
}
.navigation .backgrounds .dot-6 {
  left: 485px;
  bottom: -9px;
}
.navigation .backgrounds .dot-7 {
  right: 145px;
  bottom: -9px;
}
.navigation .bottom-title {
  margin-top: 24px;
}
.navigation .bottom-title .nav-5,
.navigation .bottom-title .nav-6,
.navigation .bottom-title .nav-7 {
  width: 225px;
  height: 100px;
  color: #05173b;
  text-align: center;
  border-radius: 30px;
  line-height: 100px;
  display: inline-block;
  -webkit-box-shadow: 30px 1px 40px 6px #e0e0e0;
  box-shadow: 30px 1px 40px 6px #e0e0e0;
  cursor: pointer;
}
.navigation .bottom-title .nav-5 {
  margin-left: 160px;
}
.navigation .bottom-title .nav-6 {
  margin-left: 105px;
}
.navigation .bottom-title .nav-7 {
  margin-left: 95px;
}
.navigation .bottom-title .nav-5 h2,
.navigation .bottom-title .nav-6 h2,
.navigation .bottom-title .nav-7 h2 {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
.details,
.details-1,
.details-2,
.details-3,
.details-4,
.details-6,
.details-7 {
  width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  position: relative;
}
.details .head,
.details-1 .head-1,
.details-2 .head-2,
.details-3 .head-3,
.details-4 .head-4,
.details-5 .head-5,
.details-6 .head-6 {
  -webkit-animation: bottom_move 1.5s both paused;
  animation: bottom_move 1.5s both paused;
  position: relative;
}
.details .head span,
.details-1 .head-1 span,
.details-2 .head-2 span,
.details-3 .head-3 span,
.details-4 .head-4 span,
.details-5 .head-5 span,
.details-6 .head-6 span {
  background: url("/css/image/down.png") no-repeat;
  width: 55px;
  height: 39px;
}
.details .head h3,
.details-1 .head-1 h3,
.details-2 .head-2 h3,
.details-3 .head-3 h3,
.details-4 .head-4 h3,
.details-5 .head-5 h3,
.details-6 .head-6 h3 {
  margin-top: 20px;
  font-size: 48px;
  color: #1e90ff;
}
.details .content,
.details-1 .content,
.details-2 .content,
.details-3 .content,
.details-4 .content,
.details-5 .content,
.details-6 .content {
  margin-top: 60px;
  width: 100%;
  position: relative;
}
.details .content .brands .introduce {
  width: 826px;
  position: relative;
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
}
.details .content .brands .introduce span,
.details-1 .content .anime .introduce span,
.details-2 .content .loan .introduce span,
.details-4 .content .optimization .key-words span,
.details-4 .content .optimization .time span,
.details-4 .content .optimization .strategy span,
.details-5 .content .media .advertisers span,
.details-5 .content .media .serve span,
.details-5 .content .media .highlight span,
.details-6 .content .marketing .advertisers span,
.details-6 .content .marketing .time span,
.details-6 .content .marketing .range span,
.details-6 .content .marketing .service span {
  width: 6px;
  height: 26px;
  background-color: #1e90ff;
  display: inline-block;
}
.details .content .brands .introduce h4,
.details-1 .content .anime .introduce h4,
.details-2 .content .loan .introduce h4,
.details-4 .content .optimization .key-words h4,
.details-4 .content .optimization .time h4,
.details-4 .content .optimization .strategy h4,
.details-5 .content .media .advertisers h4,
.details-5 .content .media .serve h4,
.details-5 .content .media .highlight h4,
.details-6 .content .marketing .advertisers h4,
.details-6 .content .marketing .time h4,
.details-6 .content .marketing .range h4,
.details-6 .content .marketing .service h4 {
  display: inline-block;
  font-size: 24px;
  color: rgba(5, 23, 59, 0.75);
  margin: 0;
  margin-left: 15px;
  vertical-align: super;
}
.details .content .brands .introduce p,
.details-1 .content .anime .introduce p,
.details-2 .content .loan .introduce p,
.details-4 .content .optimization .key-words p,
.details-4 .content .optimization .time p,
.details-4 .content .optimization .strategy p,
.details-5 .content .media .advertisers p,
.details-5 .content .media .serve p,
.details-5 .content .media .highlight p,
.details-6 .content .marketing .advertisers p,
.details-6 .content .marketing .time p,
.details-6 .content .marketing .range p,
.details-6 .content .marketing .service p {
  font-size: 20px;
  color: rgba(112, 128, 144, 0.75);
  margin-top: 20px;
  margin-left: 23px;
}
.details .content .brands .program {
  width: 826px;
  margin-top: 99px;
  position: relative;
  -webkit-animation: left_move 1.5s 0.1s both paused;
  animation: left_move 1.5s 0.1s both paused;
}
.details .content .brands .program span,
.details-1 .content .anime .program span,
.details-2 .content .loan .program span {
  width: 6px;
  height: 26px;
  background-color: #1e90ff;
  display: inline-block;
}
.details .content .brands .program h4,
.details-1 .content .anime .program h4,
.details-2 .content .loan .program h4 {
  display: inline-block;
  font-size: 24px;
  color: rgba(5, 23, 59, 0.75);
  margin: 0;
  margin-left: 15px;
  vertical-align: super;
}
.details .content .brands .program p,
.details-1 .content .anime .program p,
.details-2 .content .loan .program p {
  font-size: 20px;
  color: rgba(112, 128, 144, 0.75);
  margin-top: 20px;
  margin-left: 23px;
  margin-bottom: 0;
}
.details .content .brands .effect,
.details-1 .content .anime .effect,
.details-2 .content .loan .effect {
  margin-top: 100px;
}
.details .content .brands .effect .vertical-line,
.details-2 .content .loan .effect span,
.details-4 .content .optimization .effect span,
.details-5 .content .media .effect span,
.details-6 .content .marketing .effect span {
  width: 6px;
  height: 26px;
  background-color: #1e90ff;
  display: inline-block;
}
.details .content .brands .effect h4,
.details-1 .content .aneme .effect h4,
.details-2 .content .loan .effect h4,
.details-4 .content .optimization .effect h4,
.details-5 .content .media .effect h4,
.details-6 .content .marketing .effect h4 {
  display: inline-block;
  font-size: 24px;
  color: rgba(5, 23, 59, 0.75);
  margin: 0;
  margin-left: 15px;
  vertical-align: super;
}
.details .content .effect .read,
.details .content .effect .forwarding,
.details .content .effect .comment,
.details .content .effect .news,
.details .content .effect .baidu-entry {
  width: 200px;
  height: 100px;
  -webkit-box-shadow: 1px 1px 25px 6px #b8b8b8;
  box-shadow: 1px 1px 25px 6px #b8b8b8;
  border-radius: 30px;
  text-align: center;
  position: relative;
}
.details .content .effect .read {
  margin-left: 15px;
  margin-top: 40px;
}
.details .content .effect .read div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -37.5px;
  margin-left: -64px;
}
.details .content .effect .forwarding {
  margin-left: 15px;
  display: inline-block;
  margin-top: 60px;
}
.details .content .effect .forwarding div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -37.5px;
  margin-left: -56.5px;
}
.details .content .effect .comment {
  display: inline-block;
  margin-left: 60px;
}
.details .content .effect .comment div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35.5px;
  margin-left: -55px;
}
.details .content .effect .news {
  display: inline-block;
  margin-left: 60px;
}
.details .content .effect .news div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35.5px;
  margin-left: -46.5px;
}
.details .content .effect .baidu-entry {
  display: inline-block;
  margin-left: 60px;
}
.details .content .effect .baidu-entry div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35.5px;
  margin-left: -72px;
}
.details .content .effect .read div em,
.details .content .effect .forwarding div em,
.details .content .effect .comment div em,
.details .content .effect .news div em,
.details .content .effect .baidu-entry div em {
  font-size: 35px;
  color: #1e90ff;
  font-style: normal;
}
.details .content .effect .read div span,
.details .content .effect .forwarding div span,
.details .content .effect .comment div span,
.details .content .effect .news div span,
.details .content .effect .baidu-entry div span {
  font-size: 35px;
  color: #1e90ff;
}
.details .content .effect .read div p,
.details .content .effect .forwarding div p,
.details .content .effect .comment div p,
.details .content .effect .new div p,
.details .content .effect .baidu-entry div p {
  font-size: 18px;
  color: #708090;
  margin: 0;
}
.details .content .brands .background-image {
  background: url("/css/image/brands.png") no-repeat;
  width: 851px;
  height: 688px;
  position: absolute;
  bottom: 138px;
  right: -50px;
  -webkit-animation: brands_right_move 1.5s 0.1s both paused;
  animation: brands_right_move 1.5s 0.1s both paused;
}
.details-1 {
  display: none;
}
.details-1 .content .anime .background-image {
  background: url("/css/image/anime-background-image.png") no-repeat;
  width: 269px;
  height: 421px;
  position: absolute;
  top: -25px;
  right: 10px;
  -webkit-animation: anime_right_move 1.5s both paused;
  animation: anime_right_move 1.5s both paused;
}
.details-1 .content .anime .introduce {
  width: 916px;
  position: relative;
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
}
.details-1 .content .anime .program {
  width: 916px;
  margin-top: 99px;
  position: relative;
  -webkit-animation: left_move 1.5s 0.2s both paused;
  animation: left_move 1.5s 0.2s both paused;
}
.details-1 .content .anime .effect {
  position: relative;
  -webkit-animation: left_move 1.5s 0.4s both paused;
  animation: left_move 1.5s 0.4s both paused;
}
.details-1 .content .anime .effect .title span {
  width: 6px;
  height: 26px;
  background-color: #1e90ff;
  display: inline-block;
}
.details-1 .content .anime .effect .title h4 {
  display: inline-block;
  font-size: 24px;
  color: rgba(5, 23, 59, 0.75);
  margin: 0;
  margin-left: 15px;
  vertical-align: super;
}
.details-1 .content .anime .effect .effect-item,
.details-1 .content .anime .effect .effect-item-1,
.details-1 .content .anime .effect .effect-item-2 {
  display: inline-block;
  margin-top: 60px;
  position: relative;
}
.details-1 .content .anime .effect .effect-item {
  -webkit-animation: bottom_move 1.5s both paused;
  animation: bottom_move 1.5s both paused;
}
.details-1 .content .anime .effect .effect-item-1 {
  -webkit-animation: bottom_move 1.5s 0.3s both paused;
  animation: bottom_move 1.5s 0.3s both paused;
}
.details-1 .content .anime .effect .effect-item-2 {
  -webkit-animation: bottom_move 1.5s 0.6s both paused;
  animation: bottom_move 1.5s 0.6s both paused;
}
.details-1 .content .anime .effect div img {
  width: 100%;
  height: auto;
}
.details-2 {
  display: none;
}
.details-2 .content .loan .background-image {
  background: url("/css/image/loan-background-image.png") no-repeat;
  width: 427px;
  height: 673px;
  position: absolute;
  bottom: 71px;
  right: -135px;
  -webkit-animation: loan_right_move 1.5s both paused;
  animation: loan_right_move 1.5s both paused;
}
.details-2 .content .loan .introduce {
  position: relative;
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
}
.details-2 .content .loan .program {
  margin-top: 60px;
  position: relative;
  -webkit-animation: left_move 1.5s 0.2s both paused;
  animation: left_move 1.5s 0.2s both paused;
}
.details-2 .content .loan .effect .title {
  position: relative;
  -webkit-animation: left_move 1.5s 0.4s both paused;
  animation: left_move 1.5s 0.4s both paused;
}
.details-2 .content .loan .effect .loan-item,
.details-2 .content .loan .effect .loan-item-1 {
  display: inline-block;
  width: 394px;
  height: 394px;
  margin-top: 60px;
  position: relative;
  -webkit-animation: bottom_move 1.5s both paused;
  animation: bottom_move 1.5s both paused;
}
.details-2 .content .loan .effect div img {
  width: 100%;
  height: auto;
}
.details-3 {
  display: none;
}
.details-3 .content .background-image {
  width: 650px;
  height: 697px;
  background: url("/css/image/application-background-image.png") no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-animation: right_move 1.5s 0.2s both paused;
  animation: right_move 1.5s 0.2s both paused;
}
.details-3 .content .application-item,
.details-3 .content .application-item-1 {
  width: 394px;
  height: 394px;
  -webkit-animation: left_move 1.5s 0.2s both paused;
  animation: left_move 1.5s 0.2s both paused;
  position: relative;
}
.details-3 .content div img {
  width: 100%;
  height: auto;
}
.details-4 {
  display: none;
}
.details-4 .content .optimization .background-image {
  width: 788px;
  height: 419px;
  background: url("/css/image/optimization-background-image.png") no-repeat;
  position: absolute;
  bottom: 35px;
  right: -180px;
  -webkit-animation: optimization_right_move 1.5s 0.1s both paused;
  animation: optimization_right_move 1.5s 0.1s both paused;
}
.details-4 .content .optimization .key-words {
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
  position: relative;
}
.details-4 .content .optimization .time {
  -webkit-animation: left_move 1.5s 0.2s both paused;
  animation: left_move 1.5s 0.2s both paused;
  position: relative;
}
.details-4 .content .optimization .strategy {
  -webkit-animation: left_move 1.5s 0.4s both paused;
  animation: left_move 1.5s 0.4s both paused;
  position: relative;
}
.details-4 .content .optimization .effect {
  -webkit-animation: left_move 1.5s 0.6s both paused;
  animation: left_move 1.5s 0.6s both paused;
  position: relative;
}
.details-4 .content .optimization .effect p {
  font-size: 18px;
  color: rgba(112, 128, 144, 0.75);
  margin-top: 20px;
  margin-left: 23px;
  margin-bottom: 0;
}
.details-4 .content .optimization .time {
  margin-top: 60px;
}
.details-4 .content .optimization .strategy {
  margin-top: 60px;
}
.details-4 .content .optimization .effect {
  margin-top: 60px;
}
.details-5 {
  display: none;
  width: 1300px;
  margin: 0 auto;
  margin-top: 60px;
}
.details-5 .content .media .background-image {
  width: 377px;
  height: 644px;
  background: url("/css/image/new-media-background-image.png") no-repeat;
  float: left;
  margin-right: 68px;
  position: relative;
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
}
.details-5 .content .media .advertisers {
  margin-top: 12px;
  position: relative;
  -webkit-animation: right_move 1.5s both paused;
  animation: right_move 1.5s both paused;
}
.details-5 .content .media .effect,
.details-5 .content .media .highlight,
.details-5 .content .media .serve {
  margin-top: 40px;
}
.details-5 .content .media .serve {
  position: relative;
  -webkit-animation: right_move 1.5s 0.2s both paused;
  animation: right_move 1.5s 0.2s both paused;
}
.details-5 .content .media .highlight {
  position: relative;
  -webkit-animation: right_move 1.5s 0.4s both paused;
  animation: right_move 1.5s 0.4s both paused;
}
.details-5 .content .media .effect {
  position: relative;
  -webkit-animation: right_move 1.5s 0.6s both paused;
  animation: right_move 1.5s 0.6s both paused;
}
.details-5 .content .media .effect div {
  width: 815px;
  height: 185px;
  position: absolute;
  bottom: -206px;
  right: 30px;
}
.details-5 .content .media .effect div img {
  width: 100%;
  height: auto;
}
.details-6 {
  display: none;
}
.details-6 .content .marketing .background-image {
  width: 434px;
  height: 641px;
  background: url("/css/image/marketing-background-image.png") no-repeat;
  float: left;
  margin-right: 138px;
  position: relative;
  -webkit-animation: left_move 1.5s both paused;
  animation: left_move 1.5s both paused;
}
.details-6 .content .marketing .advertisers {
  margin-top: 40px;
  position: relative;
  -webkit-animation: right_move 1.5s both paused;
  animation: right_move 1.5s both paused;
}
.details-6 .content .marketing .time,
.details-6 .content .marketing .range,
.details-6 .content .marketing .effect,
.details-6 .content .marketing .service {
  margin-top: 30px;
  position: relative;
}
.details-6 .content .marketing .time {
  -webkit-animation: right_move 1.5s 0.2s both paused;
  animation: right_move 2s 0.2s both paused;
}
.details-6 .content .marketing .range {
  -webkit-animation: right_move 1.5s 0.4s both paused;
  animation: right_move 2s 0.4s both paused;
}
.details-6 .content .marketing .service {
  -webkit-animation: right_move 1.5s 0.6s both paused;
  animation: right_move 2s 0.6s both paused;
}
.details-6 .content .marketing .effect {
  -webkit-animation: right_move 1.5s 0.8s both paused;
  animation: right_move 2s 0.8s both paused;
}
.details-6 .content .marketing .effect p {
  font-size: 18px;
  color: rgba(112, 128, 144, 0.75);
  margin-top: 20px;
  margin-left: 23px;
  margin-bottom: 0;
}
.footer {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #1e90ff;
  margin-top: 150px;
  color: #fff;
  font-size: 18px;
}
.footer p {
  margin: 0;
}
.footer p a {
  color: #fff;
  text-decoration: none;
}
@-webkit-keyframes bottom_move {
  from {
    bottom: -150px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes bottom_move {
  from {
    bottom: -150px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes left_move {
  from {
    left: -160px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes left_move {
  from {
    left: -160px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@-webkit-keyframes right_move {
  from {
    right: -160px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@keyframes right_move {
  from {
    right: -160px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@-webkit-keyframes optimization_right_move {
  from {
    right: -360px;
    opacity: 0;
  }
  to {
    right: -180px;
    opacity: 1;
  }
}
@keyframes optimization_right_move {
  from {
    right: -360px;
    opacity: 0;
  }
  to {
    right: -180px;
    opacity: 1;
  }
}
@-webkit-keyframes brands_right_move {
  from {
    right: -210px;
    opacity: 0;
  }
  to {
    right: -50px;
    opacity: 1;
  }
}
@keyframes brands_right_move {
  from {
    right: -210px;
    opacity: 0;
  }
  to {
    right: -50px;
    opacity: 1;
  }
}
@-webkit-keyframes anime_right_move {
  from {
    right: -185px;
    opacity: 0;
  }
  to {
    right: -25px;
    opacity: 1;
  }
}
@keyframes anime_right_move {
  from {
    right: -185px;
    opacity: 0;
  }
  to {
    right: -25px;
    opacity: 1;
  }
}
@-webkit-keyframes loan_right_move {
  from {
    right: -295px;
    opacity: 0;
  }
  to {
    right: -135px;
    opacity: 1;
  }
}
@keyframes loan_right_move {
  from {
    right: -295px;
    opacity: 0;
  }
  to {
    right: -135px;
    opacity: 1;
  }
}
@-webkit-keyframes header_move {
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@keyframes header_move {
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
